<!-- 顶部吸顶通栏 -->

<div id="layout_top">
    <div class="center">
        <div class="left">
            <a href="http://127.0.0.1:5500/dist/online.html"><b>登录</b></a>
            <span>&nbsp;|&nbsp;</span>
            <a href="http://127.0.0.1:5500/dist/online.html"><b>注册</b></a>
        </div>
        <div class="right">
            <ul>
                <li><a href="">我的账户</a> </li>
                <li>|</li>
                <li><a href="" style="color: red;">补交货款</a> </li>
                <li>|</li>
                <li><a href="">配送查询</a> </li>
                <li>|</li>
                <li><a href="">订单查询</a> </li>
                <li>|</li>
                <li><a href="">帮助中心</a> </li>
            </ul>
        </div>
    </div>
</div>

<!-- 搜索栏 -->

<div id="search">
    <div class="search_center">
        <div class="left">
            <a href="http://127.0.0.1:5500/dist/index.html">
                <img  src="https://www.7hua.com/Tpl/2016skin/Public/images/logo.gif" alt="" >
            </a>
        </div>
        <div class="center_q">
            <form action="">
                <div class="center_ipt">
                    <div class="ipt_text">
                        <input type="text" class="keyinput">
                    </div>

                    <div class="ipt_sub">
                        <input type="submit" value="搜索" class="subinput">
                    </div>
                    <div class="hotkey">
                        <ul clss="hot_ul">
                            <li class="hot_li" style="color: red;"><a href=""> 节日鲜花</a></li>
                            <li class="hot_li"><a href="">爱情鲜花</a> </li>
                            <li class="hot_li"><a href="">生日鲜花</a> </li>
                            <li class="hot_li"><a href="">商用鲜花</a> </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
        <div class="right">
            <div class="carBox">
                <a href="http://127.0.0.1:5500/dist/car.html">我的购物车</a>
                <span>></span>
            </div>
        </div>
    </div>
</div>

<!-- 导航栏 -->

<div id="navigation">
    <div class="header_top_menu">
        <div class="allmenu">
            <a href="">全部商品种类</a>
        </div>
        <div class="menuDiv">
            <ul>
                <li><a href="http://127.0.0.1:5500/dist/index.html">首页</a> </li>
                <li><a href="">鲜花</a> </li>
                <li><a href=""> 99玫瑰</a></li>
                <li><a href="">高档礼盒</a> </li>
                <li><a href="">开业花篮</a> </li>
                <li><a href="">节日鲜花</a> </li>
                <li class="menu_right">400-658-1177</li>
            </ul>
        </div>
        <div class="second_menu">
            <div class="second_menu_left">
                <ul class="second_menu_ul">
                    <li class="second_menu_1st">玫瑰、百合、生日鲜花
                        <!-- 二级菜单内容 -->
                        <div class="second_menu_2nd">
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;"><a href="http://127.0.0.1:5500/dist/filter.html">按用途</a> &ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">
                                   <a href="http://127.0.0.1:5500/dist/filter.html">按用途</a> &ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">
                                   <a href="http://127.0.0.1:5500/dist/filter.html">按用途</a> &ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">
                                   <a href="http://127.0.0.1:5500/dist/filter.html">按用途</a> &ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </li>
                    <li class="second_menu_1st">毛绒玩具、可爱熊熊
                        <div class="second_menu_2nd">
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按对象&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">仿真花</li>
                                <li class="menu_2nd_li">考拉熊</li>
                                <li class="menu_2nd_li">关节熊</li>
                                <li class="menu_2nd_li">小猪仔</li>
                                <li class="menu_2nd_li">小兔子迷糊娃</li>
                                <li class="menu_2nd_li">KITTY猫</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </li>
                    <li class="second_menu_1st">卡通花束、创意花束
                        <div class="second_menu_2nd">
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </li>
                    <li class="second_menu_1st">商业花篮、开业用花
                        <div class="second_menu_2nd">
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按对象&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">仿真花</li>
                                <li class="menu_2nd_li">考拉熊</li>
                                <li class="menu_2nd_li">关节熊</li>
                                <li class="menu_2nd_li">小猪仔</li>
                                <li class="menu_2nd_li">小兔子迷糊娃</li>
                                <li class="menu_2nd_li">KITTY猫</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="menu_2nd">
                                <li class="menu_2nd_li" style="margin-left: 80px;">按用途&ensp;&ensp;&ensp;></li>
                                <li class="menu_2nd_li">生日快乐</li>
                                <li class="menu_2nd_li">爱情鲜花</li>
                                <li class="menu_2nd_li">慰问祝福</li>
                                <li class="menu_2nd_li">商务用花</li>
                                <li class="menu_2nd_li">开业花篮</li>
                                <li class="menu_2nd_li">绿植盆栽</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="./javascripts/jQuery.js"></script>
<script>
    $(function () {
        function look() {
            for (let i = 0; i < $(".second_menu_1st").length; i++) {
                $(".second_menu_2nd")
                    .eq(i)
                    .removeClass("look");
                $(".second_menu_1st")
                    .eq(i)
                    .mouseover(function () {
                        $(".second_menu_2nd")
                            .eq(i)
                            .addClass("look")
                    });
                $(".second_menu_1st")
                    .eq(i)
                    .mouseout(function () {
                        $(".second_menu_2nd")
                            .eq(i)
                            .removeClass("look")
                    });
            }
        }
        look();

    })
</script>